import {$} from './library/jquery.js';
import cookie from './library/cookie.js';

// 取值 cookie
let shop=cookie.get('shop');

 if(shop){
     shop=JSON.parse(shop);

     let idList=shop.map(el=>el.id).join();  //获得id
     
 


     $.ajax({
         type: "get",
         url: "../../interface/shopping.php",
         data: {
             idList:idList
         },
         dataType: "json",
         success: function (res) {
             let temp='';

             res.forEach(elm=>{
                 let  picture=JSON.parse(elm.picture);

                // 让ajax请求的数据结果中遍历后的id和cookie的id相同
                let current=shop.filter(val=>val.id==elm.id);


                 temp+=` <div class="item-box">
                 <div class="item-content">
                     <div class="item-row">
                         <div class="check">
                         <input type="checkbox" class="choice-chil" >
                   
                         </div>
                         <div class="img">
                             <a href="javascript:;">
                                 <img src="../${picture[0].src}" alt="">
                             </a>
                         </div>
                         <div class="name">
                             <h3><a href="javascript:;">${elm.title}</a></h3>
                         </div>
                         <div class="price">${parseFloat(elm.price).toFixed(2)}元</div>
                         <div class="num-box">
                             <div class="num">
                                 <a href="javascript:;" class="num-a"  data-id="${elm.id}">-</a>
                                 <input type="text" value="${current[0].num}">
                                 <a href="javascript:;"  class="num-a1" data-id="${elm.id}">+</a>
                             </div>
                         </div>
                         <div class="total">${elm.price * current[0].num.toFixed(2)}</div>
                         <div class="action">
                             <a class="del" href="javascript:;">
                                 <span class="del-id" data-id="${elm.id}">x</span>
                             </a>
                         </div>
                     </div>
                 </div>
             </div>`;
             });

             //删除商品
             $('.list-item').append(temp).find('.del-id').on('click',function(){
                 let  res=shop.filter(el=>el.id!=$(this).attr('data-id'));  // 选不被点击的其他元素；
                 
                cookie.set('shop',JSON.stringify(res),1);
                location.reload();
             });




             //  商品数量加减
            $('.list-item').on('click','.num-a1',function(){
               shop.forEach(el=>{
                
                 if(el.id==$(this).attr('data-id')){
                    
                      el.num=el.num + 1; 
                      
                      $(this).siblings('input').val(`${el.num}`);
                        $(this).parents('.num-box').next().html(`${parseInt($(this).parents().prev().html()) * el.num}元`);
                 }
      
               });
             
              cookie.get('shop',JSON.stringify(shop),1);
               
            });
            $('.list-item').on('click','.num-a',function(){
                shop.forEach(el=>{
                  
                  if(el.id==$(this).attr('data-id')){
                      if(el.num!=0){
                        el.num=el.num - 1;
                        $(this).siblings('input').val(`${el.num}`);
                          $(this).parents('.num-box').next().html(`${parseInt($(this).parents().prev().html()) * el.num}元`);
                      }
                  }
                });
              
                cookie.get('shop',JSON.stringify(shop),1); 
                
             });

             let sum=0;
             // 数量总计  商品全选 
             $('.choice').click(function(){
               
           
               let flag= $('.choice').prop('checked');
               $('.choice-chil').prop('checked',flag);
                // 合计
                for(let i=1;i<$('.total').length;i++){
                    let price=parseInt($($('.total')[i]).html());
                    sum+=price;     
                }
                $('.total-price>span').html(sum);
                sum=0
                if(flag){
               }else{
               
                $('.total-price>span').html('');
               }
    
             });

            
             $('.choice-chil').click(function () { 

                let flag= $(this).prop('checked');
               
               if($(this).prop('checked')){
                    let price= parseInt($(this).parents('.item-row').find('.total').html());
                    sum+=price;
                    $('.total-price>span').html(sum);
               }else{
                $('.choice').prop('checked',flag);
                  
                let price= parseInt($(this).parents('.item-row').find('.total').html());
                sum=sum-price;
                   $('.total-price>span').html(sum); console.log(price);
                   
               }
              })



              
         }
     });
 }